<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单-exercise</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .Style{
            color: #2d2d2d;
            background-color: lightpink;
            font-size: 1.6rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>表单复选框</h2>

    <!--复选框-->


    <!--多个复选框，绑定到同一个数组,获取数组内的值-->
    <input type="checkbox" id="Name1" value="生化危机7" v-model="checkName">
    <label for="Name1">生化危机7</label>
    <input type="checkbox" id="Name2" value="模拟飞行" v-model="checkName">
    <label for="Name2"> 模拟飞行</label>
    <input type="checkbox" id="Name3" value="赛达尔传说" v-model="checkName">
    <label for="Name3"> 赛达尔传说</label>
    <p>您选择的游戏是：<span :class="{Style:isActice}">{{checkName}}</span></p>

    <br>
    <hr>
    <h3>表单单选按钮</h3>
    <h4>选择性别</h4>
    <input type="radio" id="r1" name="r1" value="男" v-model="sel">
    <label for="r1">男</label>
    <input type="radio" id="r2" name="r2" value="女" v-model="sel">
    <label for="r2">女</label>

    <h4>选择爱好</h4>
    <input type="checkbox" id="c1" value="玩游戏" v-model="hobbies">
    <label for="c1">玩游戏</label>
    <input type="checkbox" id="c2" value="看电影" v-model="hobbies">
    <label for="c2">看电影</label>

    <h4>选择结果</h4>
    <p>性别：{{sel}}</p>
    <p>爱好：{{hobbies.join(',')}}</p>
</div>


<script>
    var app= new Vue({
        el:'#app',
        data:{
            checkName:["生化危机7"],
            isActice:true,
            sel:'男',
            hobbies:[],
        },
        methods:{

        }
    })
</script>
</body>
</html>
